<!--
 - Author : wang885298.
 - Date   : 2018/6/13.
 - File   : pat.随手拍
 -->

<template>
  <div class="content" @touchend="testtouchend">

    <!--切换头部-->
    <div class="menu-tab">
      <div
        :class="['menu-tab-item',index === current?'on':'']"
        @click="check(index)" v-for="(item, index) in tab"
        :key="index">{{item}}
      </div>
    </div>

    <!--内容部分-->
    <div class="main-content">

      <div class="main-content-item" v-show="current===0?true: false">
        <mt-loadmore
          :top-method="upDownRefresh"
          :topDistance="30"
          :top-all-loaded="ciParamas.stopGetMore"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="ciParamas.stopGetMore"
          infinite-scroll-distance="10"
          infinite-scroll-immediate-check="false"
          ref="refresh">
          <!--列表内容组件-->
          <pat-List
            :civilizeList="item"
            v-for="(item,num) in civilizeList"
            :key="num"
            @addSnapShotReply="addSnapShotReply"
            @play="play">
          </pat-List>
          <div v-show="civilizeList.length>0">
            <p v-show="!ciParamas.loadedFail && ciParamas.noMoreDataTag" class="page-infinite-loading loading">
              没有更多数据了
            </p>
          </div>
          <div v-show="!ciParamas.listEmpty" class="page-infinite-loading-ct">
            <p v-show="!ciParamas.loadedFail && ciParamas.showLoadingTag" class="page-infinite-loading">
              <mt-spinner type="fading-circle"></mt-spinner>
              加载中...
            </p>
            <p v-show="ciParamas.loadedFail" class="page-infinite-loading fail">
              加载数据失败
            </p>
          </div>
          <div v-show="civilizeList.length===0&&!ciParamas.showLoadingTagSelf && !ciParamas.loadedFail"
               class="noData">
            <p>暂无数据</p>
          </div>
        </mt-loadmore>

      </div>

      <div class="main-content-item" v-show="current===1?true: false">
        <mt-loadmore
          :top-method="lowUpDownRefresh"
          :topDistance="30"
          :top-all-loaded="lowParamas.stopGetMore"
          v-infinite-scroll="lowloadMore"
          infinite-scroll-disabled="lowParamas.stopGetMore"
          infinite-scroll-distance="10"
          infinite-scroll-immediate-check="false"
          ref="lowRefresh">
          <!--列表内容组件-->
          <pat-List
            :civilizeList="item"
            v-for="(item,num) in lowList"
            :key="num"
            @addSnapShotReply="addSnapShotReply"
            @play="play">
          </pat-List>
          <div v-show="lowList.length>0">
            <p v-show="!lowParamas.loadedFail && lowParamas.noMoreDataTag" class="page-infinite-loading loading">
              没有更多数据了
            </p>
          </div>
          <div v-show="!lowParamas.listEmpty" class="page-infinite-loading-ct">
            <p v-show="!lowParamas.loadedFail && lowParamas.showLoadingTag" class="page-infinite-loading">
              <mt-spinner type="fading-circle"></mt-spinner>
              加载中...
            </p>
            <p v-show="lowParamas.loadedFail" class="page-infinite-loading fail">
              加载数据失败
            </p>
          </div>
          <div v-show="lowList.length===0&&!lowParamas.showLoadingTagSelf && !lowParamas.loadedFail"
               class="noData">
            <p>暂无数据</p>
          </div>
        </mt-loadmore>

      </div>
    </div>

    <!--跳转到发布页-->
    <div class="release" @click="turnToRelease" v-show="addbtnShow">
      <img src="../assets/images/fb.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        current: 0 | this.$route.query.current,
        tab: ['文明点赞', '不文明曝光'],
        patType: 1,
        addbtnShow: true,
        civilizeList: [],
        lowList: [],
        topStatus: '',
        pageSize: 5,
        ciParamas: {
          currentPage: 1,
          stopGetMore: true,
          listEmpty: false,
          loadedFail: false,
          showLoadingTag: true,
          showLoadingTagSelf: true,
          noMoreDataTag: false,
        },
        lowParamas: {
          currentPage: 1,
          stopGetMore: true,
          listEmpty: false,
          loadedFail: false,
          showLoadingTag: true,
          showLoadingTagSelf: true,
          noMoreDataTag: false,
        },
      }
    },
    /**
     * @description 清除滚动刷新
     */
    activated () {
      this.ciParamas.stopGetMore = false
      if (this.$route.meta.needFresh) {
        this.upDownRefresh()
      }
    },
    deactivated() {
      this.ciParamas.stopGetMore = true
    },
    mounted () {
      this.init()
    },
    methods: {
      /**
       * @description 设置每次进入页面回滚至首页
       */
      testtouchend() {
        this.$route.meta.scrollTop = document.body.scrollTop
      },
      /**
       * 初始化
       */
      init () {
        this.getSnapShotList()
        this.getLowList()
      },
      /**
       * 获取【文明】随手拍列表
       */
      getSnapShotList () {
        console.log('this.ciParamas', this.ciParamas)
        this.$request.getSnapShotList({
          page: this.ciParamas.currentPage,
          limit: this.pageSize,
          type: 1
        }).then((response) => {
          if (!this.$utils.isEmptyObject(response.list)) {
            this.civilizeList = this.civilizeList.concat(response.list)
            this.ciParamas.stopGetMore = false
            this.ciParamas.loadedFail = false
            this.ciParamas.listEmpty = false
            if (response.list.length < this.pageSize) {this.ciParamas.noMoreDataTag = true}
          } else {
            this.ciParamas.stopGetMore = true
            this.ciParamas.noMoreDataTag = true
            this.ciParamas.listEmpty = true
          }
          this.ciParamas.showLoadingTag = false
          this.ciParamas.showLoadingTagSelf = false
        }).catch(e => {
          this.ciParamas.loadedFail = true
          console.error(e)
        })
      },
      /**
       * 获取【不文明】随手拍列表
       */
      getLowList () {
        this.$request.getSnapShotList({
          page: this.lowParamas.currentPage,
          limit: this.pageSize,
          type: 2
        }).then((response) => {
          if (!this.$utils.isEmptyObject(response.list)) {
            this.lowList = this.lowList.concat(response.list)
            this.lowParamas.stopGetMore = false
            this.lowParamas.loadedFail = false
            this.lowParamas.listEmpty = false
            if (response.list.length < this.pageSize) {this.lowParamas.noMoreDataTag = true}
          } else {
            this.lowParamas.stopGetMore = true
            this.lowParamas.noMoreDataTag = true
            this.lowParamas.listEmpty = true
          }
          this.lowParamas.showLoadingTag = false
          this.lowParamas.showLoadingTagSelf = false
        }).catch(e => {
          this.lowParamas.loadedFail = true
          console.error(e)
        })
      },
      /**
       * 切换导航类型
       * @param i
       */
      check (i) {
        document.body.scrollTop = 0
        if (i < 2) {
          this.patType = i + 1
          this.current = i
          this.addbtnShow = true
        } else {
          this.addbtnShow = false
        }
      },
      /**
       * 跳转到发布页面
       */
      turnToRelease () {
        this.$router.push({
          path: '/release',
          query: {patType: this.patType}
        })
      },
      /**
       * changeShow
       * @param val
       */
      changeShow (val) {
        this.show = val
      },
      handleTopChange (status) {
        this.topStatus = status
      },
      /**
       * 【文明】下拉刷新
       */
      upDownRefresh () {
        this.refreshInit()
        this.getSnapShotList()
        setTimeout(() => {
          this.$refs.refresh.onTopLoaded()
        }, 500)
      },
      /**
       * 【文明】刷新的内容
       */
      refreshInit() {
        this.civilizeList = []
        this.ciParamas.currentPage = 1
        this.ciParamas.stopGetMore = false
        this.ciParamas.showLoadingTag = false
        this.ciParamas.showLoadingTagSelf = true
        this.ciParamas.noMoreDataTag = false
      },
      /**
       * 【文明】下滑加载更多
       */
      loadMore() {
        console.log('是否触发')
        this.ciParamas.currentPage++
        this.getSnapShotList()
        this.ciParamas.showLoadingTag = true
        this.ciParamas.showLoadingTagSelf = true
        this.ciParamas.noMoreDataTag = false
        console.log('this.currentPage:', this.ciParamas.currentPage)
      },
      /**
       * 【不文明】下拉刷新
       */
      lowUpDownRefresh () {
        this.lowRefreshInit()
        this.getLowList()
        setTimeout(() => {
          this.$refs.lowRefresh.onTopLoaded()
        }, 500)
      },
      /**
       * 【不文明】刷新的内容
       */
      lowRefreshInit() {
        this.lowList = []
        this.lowParamas.currentPage = 1
        this.lowParamas.stopGetMore = false
        this.lowParamas.showLoadingTag = false
        this.lowParamas.showLoadingTagSelf = true
        this.lowParamas.noMoreDataTag = false
      },
      /**
       * 【不文明】下滑加载更多
       */
      lowloadMore() {
        console.log('触发1')
        this.lowParamas.currentPage++
        this.getLowList()
        this.lowParamas.showLoadingTag = true
        this.lowParamas.showLoadingTagSelf = true
        this.lowParamas.noMoreDataTag = false
        console.log('this.currentPage--1:', this.lowParamas.currentPage)
      },
      /**
       * 播放，暂停视频
       * @param item
       * @param index
       * @param files
       * @param bid
       */
      play (item, index, files, bid) {
        let video = document.getElementById(item.fileId)
        let playImg = document.getElementById(bid)
        if (video.paused) {
          video.play()
          playImg.style.display = 'none'
          video.setAttribute('controls', 'controls')
        } else {
          video.pause()
          video.removeAttribute('controls')
          playImg.style.display = 'block'
        }
      },
      /**
       * 添加随手拍评论
       */
      addSnapShotReply (uid, cid, item) {
        let userName = document.getElementById(uid).value
        let content = document.getElementById(cid).innerText
        if (userName.trim().length === 0 || content.trim().length === 0) {
          if (userName.trim().length === 0) {
            this.$toast('姓名不能为空！')
            return
          }
          if (content.trim().length === 0) {
            this.$toast('评论内容不能为空！')
            return
          }
        } else {
          let params = {
            snapShotId: item.snapShotId,
            userName: userName,
            content: content
          }
          this.$request.addSnapShotReply(params).then((response) => {
            this.getSnapShotReplyList(item.snapShotId, item)
            document.getElementById(uid).value = '游客'
            document.getElementById(cid).innerText = ''
          }).catch(e => {
            console.error(e)
          })
        }
      },
      /**
       * 获取随手拍评论列表
       */
      getSnapShotReplyList (id, item) {
        this.$request.getSnapShotReplyList({snapShotId: id}).then((response) => {
          item.replys = response
        }).catch(e => {
          console.error(e)
        })
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "../assets/less/color.less";
  @import "../assets/less/fontSize.less";

  img {
    width: 100%;
  }

  .menu-tab {
    display: flex;
    padding: 0 5%;
    box-shadow: 1px 2px 4px rgba(179, 179, 179, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    &-item {
      flex: 1;
      padding: 8px 0;
      margin: 10px 0;
      font-size: @smallSize;
      text-align: center;
      color: #707070;
      background-color: #eeeeee;
    }

    .on {
      /*border-bottom: 3px solid #76e7f1;*/
      /*color: #1b1b1b;*/
      color: #fff;
      background: #76e7f1;
    }
  }
  .menu-tab {
    &-item:first-child{
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
  }
  .menu-tab {
    &-item:last-child{
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }

  .noData {
    position: fixed;
    top: 45%;
    left: 50%;
    font-size: 18px;
    margin-left: -36px;
    margin-top: -10px;
    color: #8f8e8e;
  }

  .main-content {
    padding-top: 63px;
    height: 100%;
    overflow: hidden;
    &-item {
      overflow: auto;
      height: 100%;
      background-color: #fff;
      .list {
        padding: 10px 10px 0;
        border-bottom: 10px solid #f4f4f4;
        background-color: #fff;
        &-ownner {
          display: flex;
          padding-bottom: 5px;
          &-left {
            flex: 8;
            text-align: left;
            .name {
              font-size: @mainTxtSize;
              color: #23c3d6;
            }
            .time {
              padding-top: 5px;
              font-size: @smallestSize;
              color: @auxiliaryColor;
            }

          }
          &-right {
            flex: 4;
            text-align: right;
            align-self: center;
            font-size: @smallerSize;
            color: @subColor;
            .share {
              display: inline-block;
              width: 18px;
              vertical-align: bottom;
              margin-right: 3px;
              opacity: 0.35;
            }
          }
        }
        &-detail {
          font-size: @smallerSize;
          margin-top: 5px;
          padding-bottom: 5px;
          color: #8f8e8e;
          .txt{
            color: #626262;
            padding: 3px 0 3px;
          }
        }
        .imgList {
          display: flex;
          flex-flow: wrap;
          align-self: center;
          z-index: 9;
          margin: 0 -2% 5px -1.5%;
          .img {
            width: 30%;
            margin: 5px 1.5%;
            height: 12rem;
            overflow: hidden;
            background-color: black;
            display: flex;
            border: 1px solid #eee;
            position: relative;
            z-index: 10;
            img {
              align-self: center;
            }
            video {
              align-self: center;
              height: 100%;
              width: 100%;
              position: absolute;
              z-index: 9;
            }
            .btn {
              position: absolute;
              top: 50%;
              left: 50%;
              margin-top: -3rem;
              margin-left: -3rem;
              z-index: 99;
              img {
                width: 6rem;
                height: 6rem;
              }
            }
          }
        }
        .comment {
          display: flex;
          flex-wrap: wrap;
          .input {
            width: 100%;
            border: 1px solid #e1e9ea;
            font-size: @smallerSize;
            padding: 10px 5px;
            margin-bottom: 10px;
            font-family: "微软雅黑" !important;
          }
          .textarea {
            margin-top: 5px;
            width: 100%;
            border: 1px solid #e1e9ea;
            font-size: @smallerSize;
            padding: 10px 5px;
            overflow-y: visible;
            align-self: center;
            textarea {
              width: 100%;
              border-radius: 4px;
              border: 1px solid #e1e9ea;
              font-size: @smallSize;
              padding: 10px;
              overflow-y: visible;
              align-self: center;
            }
          }
          .textarea:empty:before {
            content: attr(placeholder);
            color: #bbb;
          }
          .textarea:focus:before {
            content: none;
          }
          .replay-btn {
            width: 48%;
            margin: 15px auto 0;
            height: 42px;
            font-size: 1.6rem;
            line-height: 42px;
            align-self: flex-end;
            background-color: rgba(35, 195, 214, 0.28);
            color: #23c3d6;
            text-align: center;
            border-radius: 6px;
          }
        }
        &-replay {
          padding: 10px 10px 0 10px;
          margin-left: 2px;
          border-bottom: 1px solid #f3f1f1;
          p {
            padding-bottom: 8px;
            span:first-child {
              font-size: @smallSize;
            }
            span:last-child {
              color: @lineColor;
              padding-left: 10px;
            }
          }
        }
        .replay-list {
          overflow: hidden;
          margin: 0 -10px;
        }
        .relay-more {
          text-align: center;
          padding: 10px;
          font-size: @mainTxtSize;
          margin: 0 -10px;
          background-color: #fff;
          border-top: 1px solid #f3f1f1;
          color: #9e9d9d;
        }
        .relay-txt {
          color: #8f8e8e;
        }
      }
      .list:last-child {
        border-bottom: none;
      }
    }

  }

  .release {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 6rem;
    z-index: 98;
    img {
      width: 100%;
    }
  }

  .content {
    overflow: hidden;
    height: 100%;
  }

  .mint-loadmore {
    min-height: 100%;
    background-color: #fff;
  }

  .loading {
    padding: 0 10px 10px;
    background: #f4f4f4;
  }

  .page-infinite-loading {
    text-align: center;
  }

  .mint-spinner-fading-circle {
    display: inline-block;
    vertical-align: middle;
  }
  .fail{
    padding-top: 50%;
  }
</style>
